<template>
<div v-loading.fullscreen.lock="fullscreenLoading">
    <el-card>
        <span>批量导入订单文件</span>
    </el-card>
    <el-card>
         <el-form ref="orderForm" :model="queryParams"  size="mini" label-width="60px">
        <el-col :span="9">
          <el-form-item label="类型" prop="fileType">
            <el-select v-model="queryParams.fileType" placeholder="请选择类型" filterable clearable :style="{width: '100%'}">
              <el-option v-for="(k,v) in fileTypeOptions" :key="k" :label="fileTypeOptions[v]"
                          :value="parseInt(v)" ></el-option>            
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>
    <el-card>
        <el-upload
          class="upload-demo"
          drag
          action="fakeaction"
          ref="upload"
         :http-request="uploadFn"
         :show-file-list="true"
         :on-preview="handlePreview"
         :on-remove="handleRemove"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">
          <span style="color:red">1：一次最多只能上传100文件；</br></span>
          <span style="color:red">2：一次最多只能上传200M文件；</br></span>
          <span style="color:red">3：目前支持文件格式为：xlsx, xls, doc, docx, ppt, pptx, zip, pdf, tif, jpg, jpeg, gif, png, bmp如有其他格式请联系管理员配置。</br></span>
          <span style="color:red">4：文件格式：订单号，例如:ZX180707123.docx</br></span>  
        </div>
        </el-upload>
        <!-- <el-button style="margin-left: 45%;" size="small"
        type="success" 
        
        @click="submitUpload">上传到服务器</el-button> -->
    </el-card>
    
    <el-card>
      <el-row>
        {{errorTips}}
      </el-row>
    </el-card>
</div>

</template>

<script>
  import {ajax} from "@/store/yg/common/utils";
  import axios from "axios";
  import { untransform } from '@/store/yg/common/uri'
  import * as constant from '@/store/yg/common/constant';
  export default {
    data() {
      return {
        fileTypeOptions:{

        },
        fullscreenLoading: false,
        errorTips:"",
        queryParams:{
          fileType: ""
        },
        
        action:"",
        feeData:[],
        fileList: [{name: 'food.jpeg', url: ''}, {name: 'food2.jpeg', url: ''}]
      };
    },
    created: function () {
      this.action = constant.API_SERVER + "/api/consume/upload?uri="+untransform(this.$route.params.uri)+"&f=batchUploadFile&type=blank&name=sub&id="+this.$store.state.edit.id;
    },
    mounted() {
   
    this.getAllOptions();
  },
    methods: {
      getAllOptions(){
        var param = {};
        ajax("getAllOptions", param).then(
          res => {
            this.fileTypeOptions = res.data;
          },
          error => {
            console.log(error);
          }
        );
      },
      uploadFn(params){
          //自定义上传文件
        
        const file = params.file,
        fileType = file.type,
        isImage = fileType.indexOf("pdf") !== -1,
        isLt4M = file.size / 1024 / 1024 < 4;
        // 这里常规检验，看项目需求而定
       // if (!isImage) {
        //  this.$message.error("只能上传pdf格式!");
        //  return;
       // }

        //if (!isLt4M) {
       //   this.$message.error("只能上传图片大小小于4M");
       //   return;
      //  }
        // 根据后台需求数据格式
        if(this.queryParams.fileType === null || '' === this.queryParams.fileType){
            this.$message.error("请选择类型");
            return;
        }
        this.fullscreenLoading = true;
        const form = new FormData();
        // 文件对象
        
        form.append("items[]", file);
        form.append("fileTypeId",this.queryParams.fileType);
        axios({
          method: "post",
          url: this.action,
          data: form
        }).then(response => {
          this.fullscreenLoading = false;
          if (response.data.code === 200){
            this.errorTips = "导入成功"
            this.$message.success("导入成功!");
            this.feeData.push({mes:response.data.data.fileName,fee:response.data.data.fullFileName});
          }else{
            if (response.data.message) {
              this.errorTips = response.data.message
              this.$notify.error({
                title: '错误',
                message: '上传失败!'+response.data.message
              });
            }
          }
        }).catch(error => {
          console.log(error);
          this.$notify.error({
            title: '错误',
            message: '上传失败!'
          });
        })
    },


      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>